<template>
  <div>
    <div class="upload-image--list">
      <div class="avue-upload upload-image--item"
           v-for="(url,index) in srcs"
           :key="index">
        <div class="avue-upload avue-upload--list">
          <div class="el-upload el-upload--picture-img"
               @mouseenter.stop="changeActive(index)"
               @mouseleave.stop="removeActive(index)">
            <el-image :id="domElImageId + index"
                      class="avue-upload__avatar"
                      :src="url"
                      :preview-src-list="srcs" />
            <div class="hidden-img"
                 :id="domElImageMenuId + index">
              <i v-if="(index != 0) && (srcs.length != 1)"
                 class="el-icon-back"
                 @click.stop="mvLeft(index)"></i>
              <i class="el-icon-zoom-in"
                 @click.stop="viewImg(index)"></i>
              <i class="el-icon-delete"
                 v-if="!disable"
                 @click.stop="delImg(index)"></i>
              <i class="el-icon-right"
                 v-if="(index != (srcs.length - 1)) && (srcs.length != 1)"
                 @click.stop="mvRight(index)"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="avue-upload upload-image--item"
           v-if="!disable && (isMore > 0)">
        <div class="avue-upload avue-upload--list">
          <div class="el-upload el-upload--picture-img avue-upload__avatar">
            <i class="el-icon-plus avue-upload__icon"
               @click.stop="materialDialog = true"></i>
          </div>
        </div>
      </div>
    </div>
    <upload-material @materialCallBack="materialCallBack"
                     materialType="image"
                     :isMore="isMore"
                     v-if="materialDialog" />
  </div>
</template>

<script>
export default {
  name: 'uploadFormList',
  data () {
    return {
      srcs: [],
      disable: false,
      materialDialog: false,
      isMore: 1
    }
  },
  props: {
    id: {
      type: String,
      default: () => {
        return Math.ceil(Math.random() * 1000) + '-';
      },
    },
    options: {
      type: Object,
      default: () => {
        return {};
      },
    },
    size: {
      type: Number,
      default: 1
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    value: {
      type: String,
      default: undefined,
    },
  },
  computed: {
    domElImageId () {
      return "el-image-" + this.id;
    },
    domElImageMenuId () {
      return "el-image-menu" + this.id;
    }
  },
  mounted () {
    this.initValue()
  },
  methods: {
    // 选取图片
    materialCallBack (obj) {
      this.materialDialog = false
      if (this.srcs.length >= this.size) return
      if (obj && obj.length > 0) {
        for (let j = 0, len = obj.length; j < len; j++) {
          this.srcs.push(obj[j].url)
        }
      }
      this.isMore = this.size - this.srcs.length
      this.$emit('input', this.srcs.join(","))
    },
    // 初始化图片列表
    initValue () {
      let timer = setTimeout(() => {
        if (!!this.value) {
          this.srcs = this.value.split(',')
        }
        if (this.size) {
          this.isMore = this.size
        }
        this.disable = this.disabled
        clearTimeout(timer)
      }, 0);
    },
    // 右移图片
    mvRight (index) {
      let tmp = [...this.srcs]
      tmp[index] = this.srcs[index + 1]
      tmp[index + 1] = this.srcs[index]
      this.srcs = tmp
    },
    // 左移图片
    mvLeft (index) {
      let tmp = [...this.srcs]
      tmp[index] = this.srcs[index - 1]
      tmp[index - 1] = this.srcs[index]
      this.srcs = tmp
    },
    // 预览图片
    viewImg (index) {
      let ele = document.getElementById(this.domElImageId + index)
      if (ele) {
        ele.click()
      }
    },
    // 删除图片
    delImg (index) {
      if (this.disable) return
      this.srcs.splice(index, 1);
      this.isMore = this.size - this.srcs.length
      this.$emit('input', this.srcs.join(","))
    },
    // 鼠标移入事件
    changeActive (index) {
      let ele = document.getElementById(this.domElImageMenuId + index)
      if (ele) {
        ele.className = "el-upload-list__item-actions avue-upload__menu"
      }
    },
    // 鼠标移除事件
    removeActive (index) {
      let ele = document.getElementById(this.domElImageMenuId + index)
      if (ele) {
        ele.className = "hidden-img"
      }
    }
  }
}
</script>

<style scoped>
.upload-image--list {
  width: 100%;
  display: flex;
}
.upload-image--list .avue-upload__avatar,
.upload-image--list .avue-upload__icon {
  width: 150px;
  height: 150px;
  line-height: 150px;
}
.upload-image--list .upload-image--item {
  margin-right: 15px;
}
.upload-image--list .hidden-img {
  display: none;
}
</style>